<!--
 * @Author: yanjikun
 * @Date: 2022-04-29 14:33:18
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-17 11:33:16
 * @Description: file content
-->
<template>
  <div class="flex flex-col">
    <div class="text-right pt-8px pr-16px">
      <Button type="primary" @click="openRoleModal({})">新增</Button>
    </div>
    <div class="flex-1 mt-8px">
      <DynamicTable
        :columns="columns"
        :data-request="menuTableRequest"
        :pagination="false"
        :show-index="true"
      ></DynamicTable>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useTable } from '@/components/Table/src/hooks/useTable'
  import { TableColumn } from '@/components/Table/src/types/column'
  import { useFormModal } from '@/hooks/useModal/useFormModal'
  import { dataFormConfig, tableColumns } from './role.data'
  import { Button } from 'ant-design-vue'
  import {
    roleCreate,
    roleDelete,
    roleInfo,
    roleListAll,
    roleListByOrg,
    roleUpdate,
  } from '@/api/system/role'
  import { getCheckedKeys, getRights, listToTree } from '@/utils/helper/treeHelper'
  import { useUserStore } from '@/store/modules/user'
  defineOptions({
    name: 'Role',
  })
  const userStore = useUserStore()
  const [DynamicTable, dynamicTableInstance] = useTable()
  const [showModal] = useFormModal()
  const menuTableRequest = async () => {
    const data = await roleListAll()
    return data
  }
  const openRoleModal = async (record: Partial<API.RoleListItem>) => {
    const rights = await roleListByOrg({ id: userStore.getTenant() }).then((data) => {
      return listToTree(data)
    })
    const [formRef] = await showModal<API.RoleCreateParams>({
      modalProps: {
        title: `${record.id ? '编辑' : '新增'}角色`,
        width: 520,
        onFinish: async (values) => {
          record.id && (values.id = record.id)
          const params = {
            ...values,
            rights: getRights(values.rights, rights),
          }
          await (record.id ? roleUpdate : roleCreate)(params)
          dynamicTableInstance.reload()
        },
      },
      formProps: {
        config: dataFormConfig,
        initialValues: {},
      },
    })
    formRef?.updateConfig<API.RoleCreateParams>({
      field: 'rights',
      componentProps: {
        treeData: rights,
      },
    })
    if (record.id) {
      formRef?.setFieldsValue({ ...record, rights: getCheckedKeys(record.rights!, rights) })
    }
  }
  const handleDeleteConfirm = async ({ id }: API.RoleListItem) => {
    await roleDelete({ id: id })
    dynamicTableInstance.reload()
  }
  const columns: TableColumn<API.RoleListItem>[] = [
    ...tableColumns,
    {
      title: '操作',
      dataIndex: '$action',
      actions: ({ record }) => {
        return [
          {
            label: '编辑',
            onClick: async () => {
              const detailData = await roleInfo({ id: record.id })
              return openRoleModal(detailData)
            },
          },
          {
            label: '删除',
            modalConfirm: {
              title: '确定删除该角色吗?',
              onOk: () => handleDeleteConfirm(record),
            },
          },
        ]
      },
    },
  ]
</script>

<style lang="less" scoped></style>
